﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>无标题页</title>
    <script type="text/javascript">
    function indexOf(arr,element)
    {
        for(var i=0;i<arr.length;i++)
        {
            if(arr[i] == element)
            {
                return i;
            }
        }
        return -1;
    }
    
    function initEvent()
    {
        var tableRating = document.getElementById("tableRating");
        var tds = tableRating.getElementsByTagName("td");//取得TableRating下的所有td，不处理其他table下的td
        for(var i=0;i<tds.length;i++)
        {
            var td = tds[i];
            td.onclick = tdClick;
            td.style.cursor = "pointer";
        }
    }
    
    /*function tdClick()
    {
        var tableRating = document.getElementById("tableRating");
        var tds = tableRating.getElementsByTagName("td");
        var index = indexOf(tds,this);
        for(var i=0;i<=index;i++)
        {
            var td = tds[i];
            td.style.background = "red";
        }
        for(var i=index+1;i<tds.length;i++)
        {
            var td = tds[i];
            td.style.background = "white";
        }
    }*/
    
      function tdClick()
    {
        var tableRating = document.getElementById("tableRating");
        var tds = tableRating.getElementsByTagName("td");
        var index = indexOf(tds,this);
        for(var i=0;i<=index;i++)
        {
            var td = tds[i];
            td.innerText = '★';
        }
        for(var i=index+1;i<tds.length;i++)
        {
            var td = tds[i];
            td.innerText = '☆';
        }
    }
    </script>
</head>
<body onload="initEvent()">
<table id="tableRating">
<tr><td>☆</td><td>☆</td><td>☆</td><td>☆</td><td>☆</td></tr>
</table>
</body>
</html>
